<!DOCTYPE html>
<html lang="zh">
{include file="public/head"}
<link rel="stylesheet" type="text/css" href="/static/admin/js/webuploader/webuploader.css">
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <div class="card-title">下单用户信息</div>
        </div>
        <div class="card-body">
            <div class="d-flex">
              <img src="{$user_info.avatar}" class="rounded-circle me-3" style="width: 80px;height: 80px">
            </div>
            <hr>
            <div class="mb-2">
              <label>下单用户名：</label>
              <label>{$user_info.username}</label>
            </div>
            <hr>
            <div class="mb-2">
              <label>用户信息：</label>
              <label>邮箱：{$user_info.mail} ; 学校：{$user_info.school} ; 专业：{$user_info.major} ; 年级：{$user_info.grade} ; 
              排名：{$user_info.rank} </label>
            </div>
            <hr>
            <div class="mb-2">
              <label>能力：</label>
              <label>GPA：{$user_info.gpa} ; 托福：{$user_info.toefl} ; 雅思：{$user_info.ielts} ; LSAT：{$user_info.lsat} ; GRE{$user_info.gre}  </label>
            </div> 
            <hr>
            <div class="mb-2">
              <label>交换项目：</label>
              <label>{$user_info.exchange_country} - {$user_info.exchange_project} - {$user_info.exchange_time}</label>
            </div> 
            <hr>
            <div class="mb-2">
              <label>学业：</label>
              <label>本科：{$user_info.ug_degree} - {$user_info.ug_major} - {$user_info.ug_graduation};  研究生：{$user_info.gd_degree} - {$user_info.gd_major} - {$user_info.gd_graduation}  </label>
            </div> 
            <hr>
            <div class="mb-2">
              <label>目标学校：</label>
              <label>{$user_info.target_school}; 目标专业：{$user_info.target_major}</label>
            </div> 
            <hr>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <div class="card-title">订单详情</div>
        </div>
        <div class="card-body">
            <div class="mb-2">
              <label>订单单号：</label>
              <label>{$order_info.order_data.order_no}</label>
            </div>
            <hr>
            <div class="mb-2">
              <label>服务类型：</label>
              <label>{$order_info.order_data.service_name}</label>
            </div>
            <hr>
            <div class="mb-2">
              <label>订单备注：</label>
              <label>{$order_info.order_data.remark}</label>
            </div>
            <hr>
        </div>
      </div>
    </div>

  </div>

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">订单服务信息</div>
        </header>
        <div class="card-body">
          <form class="row" id="common_form" action="{$action}" method="post">

            <div class="mb-3 col-md-12">
              <label for="expected_time" class="form-label">
              <h6>第一步：待用户上传推荐人信息</h6>
              </label>
              
              <div class="input-group mb-3">
                <div class="table-responsive-xl">
                  <table class="table">
                    <thead>
                      <tr>
                        <th scope="col">推荐人姓名</th>
                        <th scope="col">职位</th>
                        <th scope="col">公司</th>
                        <th scope="col">单位地址</th>
                        <th scope="col">工作邮箱</th>
                        <th scope="col">联系方式</th>
                        <th scope="col">推荐人与你的关系</th>
                        <th scope="col">认识时间</th>
                        <th scope="col">推荐原因</th>
                        <th scope="col">推荐事例</th>
                        <th scope="col">希望推荐角度</th>
                      </tr>
                    </thead>
                    <tbody>
                      {if !empty($order_info.order_server_data.referee_1)}
                      <tr>
                        <th scope="row">{$order_info.order_server_data.referee_1.name}</th>
                        <td>{$order_info.order_server_data.referee_1.job}</td>
                        <td>{$order_info.order_server_data.referee_1.company}</td>
                        <td>{$order_info.order_server_data.referee_1.company_address}</td>
                        <td>{$order_info.order_server_data.referee_1.work_email}</td>
                        <td>{$order_info.order_server_data.referee_1.phone}</td>
                        <td>{$order_info.order_server_data.referee_1.relation}</td>
                        <td>{$order_info.order_server_data.referee_1.know_time}</td>
                        <td>{$order_info.order_server_data.referee_1.rec_reason}</td>
                        <td>{$order_info.order_server_data.referee_1.rec_case}</td>
                        <td>{$order_info.order_server_data.referee_1.ability}</td>
                      </tr>
                      {/if}
                      {if !empty($order_info.order_server_data.referee_2)}
                      <tr>
                        <th scope="row">{$order_info.order_server_data.referee_2.name}</th>
                        <td>{$order_info.order_server_data.referee_2.job}</td>
                        <td>{$order_info.order_server_data.referee_2.company}</td>
                        <td>{$order_info.order_server_data.referee_2.company_address}</td>
                        <td>{$order_info.order_server_data.referee_2.work_email}</td>
                        <td>{$order_info.order_server_data.referee_2.phone}</td>
                        <td>{$order_info.order_server_data.referee_2.relation}</td>
                        <td>{$order_info.order_server_data.referee_2.know_time}</td>
                        <td>{$order_info.order_server_data.referee_2.rec_reason}</td>
                        <td>{$order_info.order_server_data.referee_2.rec_case}</td>
                        <td>{$order_info.order_server_data.referee_2.ability}</td>
                      </tr>
                      {/if}
                    </tbody>
                  </table>
                </div>
              </div>
              <label for="meeting_link" class="form-label">用户提出的建议：</label>
              <!-- <span>{$order_info.order_server_data.user_suggest}</span> -->
              <div class="col-8">
                <p3>{$order_info.order_server_data.user_suggest}</p3>
              </div>
              <hr>
              
            </div>
            {if !empty($order_info.order_server_data.referee_1) && !empty($order_info.order_server_data.referee_2)}
            <div class="mb-3 col-md-12">
              <label for="meeting_link" class="form-label">
              <h6>第二步：提出修改建议，待用户补充素材</h6>
              </label>
              <textarea class="form-control" name="expert_suggest_1" rows="6" style="width:70%">{$order_info.order_server_data.expert_suggest_1}</textarea>
              <label for="expected_time" class="form-label">修改建议附件:</label>
              <div class="clearfix">

                <input type="hidden" name="message_step" value="15">
                <div class="filePicker_more">选择文件</div>
                <ul class="show_more_file">
                  {volist name="$order_info.order_server_data.expert_thinking_file" id="v" key="k"}
                  <li>文件名称：{$v.file_name} &nbsp;&nbsp;&nbsp;链接地址：<a href="{$v.file_path}" target="_blank">{$v.file_path}</a>
                    <input type="hidden" name="expert_thinking_file[{$k}][file_name]" value="{$v.file_path}">
                    <input type="hidden" name="expert_thinking_file[{$k}][file_path]" value="{$v.file_path}">
                    <i class="mdi mdi-delete-forever mdi-24px del_more_file"></i>
                  </li>
                  {/volist}
                </ul>
                <label id="file_name"></label>
                <label id="file_size">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <label id="file_time">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">0%</div>
              </div>
            </div>
            <input type="hidden" name="message_step" value="5">
            {/if}

            {if !empty($order_info.order_server_data.supplement) || !empty($order_info.order_server_data.enclosure_img) ||!empty($order_info.order_server_data.enclosure_file)}
            <div class="mb-3 col-md-12">
              <label for="expected_time" class="form-label">
              <h6>第三步：查看用户补充素材，上传您给修改后的新推荐信:</h6>
              </label>
              {if !empty($order_info.order_server_data.supplement)}
              <br>
              <label class="form-label">补充素材内容：</label>
              <textarea class="form-control" rows="6" style="width:70%">{$order_info.order_server_data.supplement}</textarea>
              {/if}

              {if !empty($order_info.order_server_data.enclosure_img)}
              <label class="form-label">图片附件：</label>
              <div class="mb-2">
                <label>
                    {volist name="order_info.order_server_data.enclosure_img" id="v"}
                      <a href="{$v}" target="_blank"><img src="{$v}" style="width: 240px;height: 240px"></a>
                    {/volist}
                </label>
              </div>
              {/if}
              {if !empty($order_info.order_server_data.enclosure_file)}
              <label class="form-label">文件附件：</label>
              <div class="mb-2">
                <label>
                    {volist name="order_info.order_server_data.enclosure_file" id="v" key="k"}
                    <a href="{$v}" class="link-primary" target="_blank">({$k})：{$v}</a> 
                    {/volist}
                </label>
              </div>
              {/if}
              <label for="expected_time" class="form-label">上传您给修改后的新推荐信:</label>
              <div class="clearfix">
                <input type="hidden" name="message_step" value="6">

                <div class="filePicker">选择文件</div>
                <input type="hidden" name="expert_rec_1" id="expert_resume_0" value="{$order_info.order_server_data.expert_rec_1}">
                <input type="hidden" name="expert_rec_name_1" id="expert_resume_name_0" value="{$order_info.order_server_data.expert_rec_name_1}">
                <input type="hidden" name="expert_rec_time_1" id="expert_resume_time_0" value="{$order_info.order_server_data.expert_rec_time_1}">

                {if !empty($order_info.order_server_data.expert_rec_1)}
                <label class="form-label" id="show_expert_resume_0">
                  推荐信名称：{$order_info.order_server_data.expert_rec_name_1} &nbsp;&nbsp;&nbsp;
                  推荐信链接：<a href="{$order_info.order_server_data.expert_rec_1}" class="link-primary" target="_blank">{$order_info.order_server_data.expert_rec_1}</a> &nbsp;&nbsp;&nbsp;
                  上传时间：{$order_info.order_server_data.expert_rec_time_1}
                </label>
                {/if}
                <label id="file_name_0"></label>
                <label id="file_size_0">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <label id="file_time_0">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <div class="progress-bar" id="bar_0" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">0%</div>
              </div>
            </div>
            {/if}

            {if !empty($order_info.order_server_data.user_opinion_1) || !empty($order_info.order_server_data.user_opinion_file_1) ||!empty($order_info.order_server_data.user_opinion_img_1)}
            <div class="mb-3 col-md-12">
              <label for="meeting_link" class="form-label">
              <h6>第四步：用户下载推荐信提交意见，再次上传修改后的新推荐信</h6>
              </label>
              <textarea class="form-control" rows="6" style="width:70%">{$order_info.order_server_data.user_opinion_1}</textarea>
              {if !empty($order_info.order_server_data.user_opinion_img_1)}
              <label class="form-label">图片附件：</label>
              <div class="mb-2">
                <label>
                    {volist name="order_info.order_server_data.user_opinion_img_1" id="v"}
                      <a href="{$v}" target="_blank"><img src="{$v}" style="width: 240px;height: 240px"></a>
                    {/volist}
                </label>
              </div>
              {/if}
              {if !empty($order_info.order_server_data.user_opinion_file_1)}
              <label class="form-label">文件附件：</label>
              <div class="mb-2">
                <label>
                    {volist name="order_info.order_server_data.user_opinion_file_1" id="v" key="k"}
                    <a href="{$v}" class="link-primary" target="_blank">({$k})：{$v}</a> 
                    {/volist}
                </label>
              </div>
              {/if}
            </div>
            <div class="mb-3 col-md-12">
              <label for="expected_time" class="form-label">上传您给修改后的新推荐信:</label>
              <div class="clearfix">
                <input type="hidden" name="message_step" value="6">

                <div class="filePicker">选择文件</div>
                <input type="hidden" name="expert_rec_2" id="expert_resume_1" value="{$order_info.order_server_data.expert_rec_2}">
                <input type="hidden" name="expert_rec_name_2" id="expert_resume_name_1" value="{$order_info.order_server_data.expert_rec_name_2}">
                <input type="hidden" name="expert_rec_time_2" id="expert_resume_time_1" value="{$order_info.order_server_data.expert_rec_time_2}">

                {if !empty($order_info.order_server_data.expert_rec_2)}
                <label class="form-label" id="show_expert_resume_0">
                  推荐信名称：{$order_info.order_server_data.expert_rec_name_2} &nbsp;&nbsp;&nbsp;
                  推荐信链接：<a href="{$order_info.order_server_data.expert_rec_2}" class="link-primary" target="_blank">{$order_info.order_server_data.expert_rec_2}</a> &nbsp;&nbsp;&nbsp;
                  上传时间：{$order_info.order_server_data.expert_rec_time_2}
                </label>
                {/if}
                <label id="file_name_1"></label>
                <label id="file_size_1">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <label id="file_time_1">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <div class="progress-bar" id="bar_1" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">0%</div>
              </div>
            </div>
            {/if}



            {if !empty($order_info.order_server_data.expert_rec_2)}
            <div class="mb-3 col-md-12">
              <label for="meeting_link" class="form-label">
              <h6>第五步(最终步)：等待用户确认版本</h6>
              </label>
              {if !empty($order_info.order_server_data.confirm_version)}
                  <div class="input-group mb-3">
                    <label for="expected_time" class="form-label">用户已确认版本为： （{$order_info.order_server_data.confirm_version}）</label>
                    {if $order_info.order_server_data.confirm_version == 1}
                    {$order_info.order_server_data.expert_rec_name_1} &nbsp;&nbsp;&nbsp;
                    <a href="{$order_info.order_server_data.expert_rec_1}" class="link-primary" target="_blank">{$order_info.order_server_data.expert_rec_2}</a>
                    {else /}
                    {$order_info.order_server_data.expert_rec_name_2} &nbsp;&nbsp;&nbsp;
                    <a href="{$order_info.order_server_data.expert_rec_2}" class="link-primary" target="_blank">{$order_info.order_server_data.expert_rec_2}</a>
                    {/if}
                    
                  </div>
              {/if}
            </div>
            {/if}

            {if $order_info.order_data.status == 4}
            <div class="mb-3 col-md-12">
              <label for="meeting_link" class="form-label">
              <h6>第六步：服务已完成，服务完成时间：{$order_info.order_data.complete_time}</h6>
              </label>
            </div>
            {/if}
            <input type="hidden" name="service_name" value="{$order_info.order_data.service_name}">
            <input type="hidden" name="id" value="{$order_info.order_data.id}">
            <input type="hidden" id="jump_url" value="self">

             {if $order_info.order_data.status == 1}
            <div class="mb-3 col-md-12">
              <button type="submit" class="btn btn-primary ajax-post" target-form="add-form">确 定</button>
              <button type="button" class="btn btn-default" id="close_layer_open">返 回</button>
              <button type="button" class="btn btn btn-teal" id="refresh_page">
                <i class="mdi mdi-file-refresh"></i>刷新页面
              </button>
              <button type="button" class="btn btn-success order-complete">
                <i class="mdi mdi-checkbox-marked-circle-outline"></i>设置订单为已完成
              </button>
            </div>
            {/if}
          </form>
        </div>
      </div>
    </div>

  </div>

</div>
{include file="public/script"}
<script type="text/javascript" src="/static/admin/laydate/laydate.js"></script>
<script type="text/javascript" src="/static/admin/js/webuploader/webuploader.js"></script>
<script type="text/javascript">
      //多次上传
                var GUID = WebUploader.Base.guid();
                // 初始化Web Uploader
                var uploader = WebUploader.create({
                    // 选完文件后，是否自动上传。
                    auto: true,
                    // swf文件路径
                    swf: '/static/admin/js/webuploader/Uploader.swf',
                    // 文件接收服务端。
                    server: '/admin/common/chunkUpload',
                    pick: {
                        id:'.filePicker_more',
                        //是否开启多个文件选择能力
                        multiple:false,
                    },
                    chunked: true,   //开启分片上传
                    chunkSize: 2*1024*1024,   //分片大小
                    threads: 1,               //上传并发数。允许同时最大上传进程数。
                    formData: {guid: GUID, is_chunk:1},   //guid：任务号
                    //fileSingleSizeLimit:30*1024*1024,  //文件大小限制
                    fileVal:'file',
                    duplicate: true,  //可否可以重复上传相同文件（如果为true，则相同文件可以重复上传）
                });
                uploader.on('uploadProgress',function (file,percentage ) {
                //显示进度条
                    show_rate = Math.floor(percentage* 100);
                    $('.progress-bar').css({width:show_rate+'%'});
                    $('.progress-bar').text(show_rate+'%');
                })
                //上传成功时的回调方法
                uploader.on('uploadSuccess',function (file,res) {
                    if(res.code == 100)
                    {
                        var upload_more_size = $('.show_more_file li').length;
                        upload_more_size = upload_more_size+1;
                        console.log(upload_more_size);
                        //$('#file_path').html('&nbsp;&nbsp;&nbsp;&nbsp;文件地址：'+res.data.file_path);
                        //$('#file_path').attr('href', res.data.file_path);
                        $('#file_name').text('文件名称：'+res.data.file_name);
                        $('#file_size').html('&nbsp;&nbsp;&nbsp;&nbsp;文件大小：'+res.data.size);
                        $('#file_time').html('&nbsp;&nbsp;&nbsp;&nbsp;上传时间：'+res.data.time);
            
                        $('.show_more_file').append('<li>文件名称：'+res.data.file_name+' &nbsp;&nbsp;&nbsp;链接地址：<a href="'+res.data.file_path+'" target="_blank">'+res.data.file_path+'</a> &nbsp;&nbsp;&nbsp;上传时间：'+res.data.time+'<input type="hidden" name="expert_thinking_file['+upload_more_size+'][file_name]" value="'+res.data.file_name+'"><input type="hidden" name="expert_thinking_file['+upload_more_size+'][file_path]" value="'+res.data.file_path+'"><i class="mdi mdi-delete-forever mdi-24px del_more_file"></i></li>');
                    }else{
                        
                    }
                })
    </script>
<script type="text/javascript">

var GUID = WebUploader.Base.guid();
$('.filePicker').each(function(index,el){
    console.log(index);
    // 初始化Web Uploader
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: '/static/admin/js/webuploader/Uploader.swf',
        // 文件接收服务端。
        server: '/admin/common/chunkUpload',
        pick: el,
        chunked: true,   //开启分片上传
        chunkSize: 2*1024*1024,   //分片大小
        threads: 1,               //上传并发数。允许同时最大上传进程数。
        formData: {guid: GUID, is_chunk:1},   //guid：任务号
        //fileSingleSizeLimit:30*1024*1024,  //文件大小限制
        fileVal:'file',
        duplicate: true,  //可否可以重复上传相同文件（如果为true，则相同文件可以重复上传）
    });

    uploader.on('uploadProgress',function (file,percentage ) {
        //显示进度条
        show_rate = Math.floor(percentage* 100);
        $('#bar_'+index).css({width:show_rate+'%'});
        $('#bar_'+index).text(show_rate+'%');
    })

    //上传成功时的回调方法
    uploader.on('uploadSuccess',function (file,res) {
        console.log(index);
        if(res.code == 100)
        {
            $('#show_expert_resume_'+index).remove();

            $('#expert_resume_'+index).val('');
            $('#expert_resume_name_'+index).val('');
            $('#expert_resume_time_'+index).val('');
            $('#file_name_'+index).text('');
            $('#file_size_'+index).html('');
            $('#file_time_'+index).html('');


            $('#expert_resume_'+index).val(res.data.file_path);
            $('#expert_resume_name_'+index).val(res.data.file_name);
            $('#expert_resume_time_'+index).val(res.data.time);
            $('#file_name_'+index).text('文件名称：'+res.data.file_name);
            $('#file_size_'+index).html('&nbsp;&nbsp;&nbsp;&nbsp;文件大小：'+res.data.size);
            $('#file_time_'+index).html('&nbsp;&nbsp;&nbsp;&nbsp;上传时间：'+res.data.time);
        }else{
            
        }
    })
})
</script>

<script type="text/javascript">
$(document).on("click",".del_more_file",function(){
    $(this).parent().remove();
})


$('.order-complete').click(function(){
    layer.confirm('确定设置此订单为已完成吗?', function(index){
        $.post('/admin/expertOrder/setOrderComplete',{id:{$order_info.order_data.id}},function(res)
        {
            if(res.code == 200)
            {
                showNotify(res.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'right', '{$action}');

                $("#table").bootstrapTable('selectPage', $("#table").bootstrapTable("getOptions").pageNumber);  //跳转到此页
            }else{
                showNotify(res.msg, 'danger', 1000, 'mdi mdi-information-outline', 'top', 'right');
            }
        })
        layer.close(index);
    })
})
</script>
</body>
</html>